
<style>
	.tab-body{
		height: 500px;
		overflow-y:scroll; 
	}


	.text1{
		color:#00C297;
	}
	.text2{
		color:#005744;
		font-weight: bold;
	}
	.tab-div{

	}

	.header-top{
		position:fixed;
		top:5;
		z-index:15;
		background: rgba(255,255,255,0.8);
		margin-right: auto;
		margin-left: auto;
	}

	
</style>	


<div id="top">
	<div>
		<form action="/medialib/films/" method="post">
			<div class="row">
				<div class="large-12 columns">
					<div class="large-2 columns"> <input  type="text" name="series_name"  placeholder="series_name"/> </div>
					<div class="large-2 columns"> <input  type="text" name="series_season"  placeholder="series_season"/> </div>
					<div class="large-2 columns"> <input  type="text" name="series_count"  placeholder="series_count"/> </div>
					<div class="large-2 columns"> <input  type="text" name="series_link"  placeholder="series_link"/> </div>
					<div class="large-2 columns"> <input  type="text" name="series_date" placeholder"series_date"> </div>
					<input class="button tiny" type="submit" value="add" >
				</div>
			</div>
		</form>
	</div>
	

	<div class="row">
		<div class="large-12 columns">
			<div class="large-4 large-offset-8 columns">
				<input type="text" placeholder="search" data-bind="value:views.table.testName, valueUpdate:['input', 'afterkeydown']"> 
			</div>
		</div>	
	</div>
</div>		

<div class="tab-div">
	<div class="row">
		<div class="large-12 columns">
			<table >
				<thead> 
					<th data-bind="click:views.table.events.sort(3)">series_id</th>
					<th>series_type</th>
					<th>series_name</th>
					<th data-bind="click:views.table.events.sort(2)">series_season</th>
					<th>series_count</th>
					<th>series_link</th>
					<th>series_date</th>
					<th data-bind="click:views.table.events.sort(1)">diff</th>
					<th> ... </th>
				</thead>
				<tbody data-bind="foreach:views.table.model" >  

					<tr class="tab-edit" data-bind="ifnot:edit">
						<td> <span data-bind="text:cell.series_id"></span> </td>
						<td> <span data-bind="text:cell.series_type"></span> </td>
						<td> <span data-bind="text:cell.series_name"></span> </td>
						<td> <span data-bind="text:cell.series_season"></span> </td>
						<td> <span data-bind="text:cell.series_count"></span> </td>
						<td> <a data-bind="attr:{href:cell.series_link}" target="_blank" > link </a> </td>
						<td> <span data-bind="text:cell.series_date"></span>  </td>
						<td> <span data-bind="text:cell.diff, css:cell.diffcss"></span>  </td>
						<td> 
							<span class="tab-remove" data-bind="click:events.remove">X</span> 
							<span class="tab-remove" data-bind="click:events.plus">+</span> 
							<span class="tab-remove" data-bind="click:events.edit">...</span> 
						</td>
					</tr>
					<tr class="tab-edit" data-bind="if:edit">
						<td> <input type="text" data-bind="value:cell_edit().series_id" /> </td>
						<td> <input type="text" data-bind="value:cell_edit().series_type" /> </td>
						<td> <input type="text" data-bind="value:cell_edit().series_name" /> </td>
						<td> <input type="text" data-bind="value:cell_edit().series_season" /> </td>
						<td> <input type="text" data-bind="value:cell_edit().series_count" /> </td>
						<td> <input type="text" data-bind="value:cell_edit().series_link" /> </td>
						<td> <input type="text" data-bind="value:cell_edit().series_date" />  </td>
						<td> <input type="text" data-bind="value:cell_edit().diff" />  </td>
						<td> 
							<!--span class="tab-remove" data-bind="click:events.remove">X</span> 
							<span class="tab-remove" data-bind="click:events.plus">+</span--> 
							<span class="tab-remove" data-bind="click:events.save">V</span> 
							<span class="tab-remove" data-bind="click:events.cancel">X</span> 
						</td>
					</tr>
				</tbody>
			</table>

		</div>
	</div>
</div>




<script>
	var _data_table  =  {{ data | raw }} ;
</script>

<script>
		
	window.view = window.view || {};
	window.view.table = window.view.table || {};
	window.view.table.Model = window.view.table.Model || function(data, root){
		var self = this;
		self.model = ko.observableArray();
		self.model_const = ko.observableArray();
		self.edit_row = ko.observable();
		self.view = ko.observableArray();
		self.settings = {
			page: 1,
			rowsOnPage: 10,
			total: 0
		}

		

		self.sortstate = {
			idx:'',
			direction:1,
			sortcolumns : {
				1:'diff',
				2:'series_season',
				3:'series_id'
			}
		}

		var quicksearch = function(){
			console.log("quick");
		}

		self.testName = ko.observable("").extend({rateLimit:{timeout:500}});
		
		self.upperCaseName = ko.computed(function() {
			var search = self.testName();
			var arr = self.model_const();
			arr = _.filter( arr, function(it){
				return  (it.cell.series_name.toUpperCase().indexOf(search.toUpperCase()) + 1); 
			});
			self.model( arr );
			return "";
		});

		self.events = {
			quicksearch:function(){
				console.log("quick");
			},
			sort: function(par){
				if(self.sortstate.idx === par){
					self.sortstate.direction = -1*self.sortstate.direction; 
				}else{
					self.sortstate.idx = par;
					self.sortstate.direction = 1; 
				}
				
				var idx_name = self.sortstate.sortcolumns[par];
				var arr = self.model();
				var direction = self.sortstate.direction;
				arr = _.sortBy(arr, function(it){ 
				    return  direction * it.cell[idx_name];
				});
				self.model(arr);
			}
		}

		function getView(page){
			var arr = self.model();
			var retarr = [];
			if( self.settings.total < page ){
					var start = (page-1)*self.settings.rowsOnPage;
					var end = start + self.settings.rowsOnPage;	
					retarr = arr.slice( start, end );
			}else if( self.settings.total  === page ){
				var start = (page-1)*self.settings.rowsOnPage;
				retarr = arr.slice( start);	
			}	
			return retarr;
		}

		function init(data){
			var arr = _.map(data, function(item){

				var cur = moment(item.series_date); 
				var now = moment();
				var diff = now.diff(cur,'day');

				item.diff = diff;
				item.diffcss = ko.computed(function(){
					return diff < 7 ? '':'text2';
				}) 

				var ret_obj = {
					parent:self,
					cell:item,
					cell_edit:ko.observable(),
					edit:ko.observable(false),
					events:{
						edit:function(e){
							e.cell_edit(e.cell);
							e.edit(true);
						},
						save:function(e){
							console.log("save");
							var dataSend = {
								series_id:e.cell_edit().series_id,
								series_type:e.cell_edit().series_type,
								series_name:e.cell_edit().series_name,
								series_season:e.cell_edit().series_season,
								series_count:e.cell_edit().series_count,
								series_link:e.cell_edit().series_link
							}
							$.ajax({
								method:"post",
								url:'/medialib/films/' + e.cell.series_id,
								dataType: 'json',
								data:{
									method:"edit",
									data:dataSend
								}
							})
							.done(function(resp){
								console.log( resp );
								window.location.reload();
							});
						},	
						cancel:function(e){
							console.log("cancel");
							e.edit(false);
						},
						remove:function(e){
							$.ajax({
								method:"delete",
								url:'/medialib/films/' + e.cell.series_id,

							})
							.done(function(resp){
								window.location.reload();
							});
						},
						plus:function(e){
							$.ajax({
								method:"post",
								url:'/medialib/films/' + e.cell.series_id,
								dataType: 'json',
								data:{
									method:"inc"
								}
							})
							.done(function(resp){
								e.cell.series_count = resp['series_count'];
								window.location.reload();
							});
						}

					}
				}
				return ret_obj;
			});
			self.settings.total = Math.ceil(arr.length / self.settings.rowsOnPage );
			self.model( arr );
			self.model_const( self.model() );
		}
		init(data);
	};


</script>
